<template>
  <div>
    <el-descriptions style="margin-top: 10px;width: 500px" :column="1"  border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-info"></i>
          用户账号
        </template>
        {{user.userid}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名称
        </template>
        {{user.username}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-star-on"></i>
          用户密码
        </template>
        {{user.password}}
        <el-button style="float: right" type="primary" size="small" @click="changePass">修改</el-button>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user-solid"></i>
          用户昵称
        </template>
        {{user.nickname}}
        <el-button style="float: right" type="primary" size="small" @click="changeNickname">修改</el-button>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{user.phone}}
        <el-button style="float: right" type="primary" size="small" @click="changePhone">修改</el-button>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          身份
        </template>
        {{user.identity}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-wallet"></i>
          钱包余额
        </template>
        {{user.wallet}}元
        <el-button style="float: right"  size="small" @click="inWallet">充值</el-button>
        <el-button style="float: right" type="primary" size="small" @click="outWallet">提现</el-button>
      </el-descriptions-item>
    </el-descriptions>

  </div>
</template>

<script>
export default {
  name: "information",
  data(){
    return{
      /*user: JSON.parse(window.sessionStorage.getItem("user"))*/
      /*wallet*/
      user:{
        userid:'10000',
        username:'王老板',
        password:'123456789',
        nickname:'王小二',
        phone:'13567890987',
        identity:'借卖方',
        wallet:500
      }
    }
  },
  methods:
    {
      initInformation(){
        this.getRequest('/获取所有用户信息',user.id).then(res=>{
          if(res)
          {
            //this.user = res
          }
        })
      },
      changePass(){
        this.$prompt('请输入由数字，字母或下划线构成的1~10位新密码', '修改密码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\w{1,10}$/,
          inputErrorMessage: '密码格式不正确'
        }).then(({ value }) => {
          this.user.password = value;
          this.$message({
            type: 'success',
            message: '你的新密码是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      changeNickname(){
        this.$prompt('请输入新昵称', '修改昵称', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.user.nickname = value;
          this.$message({
            type: 'success',
            message: '你的新昵称是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      changePhone(){
        this.$prompt('请输入新手机', '修改手机号', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/,
          inputErrorMessage: '手机格式不正确'
        }).then(({ value }) => {
          this.user.phone = value;
          this.$message({
            type: 'success',
            message: '你的新手机是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      inWallet(){
        this.$prompt('请输入充值金额', '充值', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^([0-9]*|d*.d{1}?d*)$/,
          inputErrorMessage: '请输入正确充值金额'
        }).then(({ value }) => {
          this.user.wallet = this.user.wallet+Number(value);
          this.$message({
            type: 'success',
            message: '充值成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      outWallet(){
        this.$prompt('请输入提现金额', '提现', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator: this.checkWallet
        }).then(({ value }) => {
          this.user.wallet = this.user.wallet-value;
          this.$message({
            type: 'success',
            message: '提现成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      checkWallet(value)
      {
        let reg= /^([0-9]*|d*.d{1}?d*)$/;
        if(!reg.test(value))
        {
          return '请输入正确格式提现金额';
        }else
        {
          if(this.user.wallet<value)
          {
            return '提现金额不可大于现有余额'
          }else
          {
            return true;
          }
        }
      }
    }
}
</script>

<style scoped>

</style>
